<template>
  <div>
    <span>新增</span>
    <el-input
      v-model="addModel"
      @input="changeModel"
      class="ml-5 mr-5 add-input"
    ></el-input>
    <span>行</span>
    <el-button
      type="primary"
      class="ml-10 add-button"
      :disabled="!addModel"
      @click="emit('addRow', Number(addModel))"
    >
      确定
    </el-button>
  </div>
</template>

<script setup>
const props = defineProps({
  _rules: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits(['addRow']);

const addModel = ref(10);
function changeModel() {
  addModel.value = addModel.value.replace(/\D+/, '');
  if (addModel.value > props._rules.max_array) {
    addModel.value = props._rules.max_array;
  }
  if (addModel.value === '0') {
    addModel.value = '';
  }
}
</script>

<style lang="scss" scoped>
.add-input {
  width: 60px !important;
  flex: initial;
}
.add-button {
  width: 50px;
}
</style>
